<template>
    <div class="wrapper">
        <el-card>
            <div class="rowDiv" style="padding: 0">
                <div class="row-left">
                </div>
                <div class="row-right">
                    <el-button type="primary" @click="createDepartment()"
                    >创建收银商品
                    </el-button>
                </div>
            </div>
            <!-- 页面加载 -->
            <el-table
                    class="text-center"
                    :data="state.tableData"
                    :align="center"
                    style="width: 100%; margin-top: 20px"
            >
                <el-table-column prop="id" label="收银商品编码"></el-table-column>
                <el-table-column prop="account" label="商品图"></el-table-column>
                <el-table-column prop="department_name" label="收银商品名称"></el-table-column>
                <el-table-column prop="emptype" label="商品规格"></el-table-column>
                <el-table-column prop="username" label="售价"></el-table-column>
                <el-table-column prop="creater_name" label="上架"></el-table-column>
                <el-table-column label="门店数量">
                    <template v-slot="scope">
                        <el-button @click="has_store(scope)" type="text">{{
                            scope.row.store_count
                            }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                                @click.native.prevent="edit_depart(scope.row)"
                                type="text"
                                size="small"
                        >
                            编辑
                        </el-button>
                        <el-button
                                style="color:red;"
                                @click.native.prevent="deleteRow(scope.row)"
                                type="text"
                                size="small"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 抽屉组件 -->
            <el-drawer
                    :title="state.good_title"
                    v-model="state.drawer"
                    :direction="direction"
                    :before-close="handleClose" destroy-on-close>
                <div class="conTxt">
                    <el-form
                            :model="state.form"
                            :rules="state.rules"
                            ref="form"
                            label-width="100px"
                            class="demo-ruleForm"
                    >
                        <el-form-item label="收银商品图片" prop="phone">
                            <Upload :action="state.up_url" @onSuccess="onSuccess">
                                <el-button type="primary">上传</el-button>
                                <img v-if="state.imageUrl" :src="state.imageUrl" class="avatar">
                            </Upload>
                        </el-form-item>
                        <el-form-item label="商品名称" prop="proname">
                            <el-input
                                    type="text"
                                    v-model="state.form.username"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="商品规格" prop="pro_cartons">
                            <el-input
                                    type="text"
                                    v-model="state.form.pro_cartons"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="商品售价" prop="pro_price">
                            <el-input
                                    type="text"
                                    v-model="state.form.pro_price"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                    <span class="dialog-footer">
            <el-button @click="state.drawer = false"
            >取 消</el-button
            >
            <el-button type="primary" @click="create()">提  交</el-button>
          </span>
                </div>

            </el-drawer>

        </el-card>
    </div>
</template>

<script>
    import {ref, nextTick, onMounted, getCurrentInstance, reactive} from "vue";
    import {useRouter} from "vue-router";
    import {ElNotification} from "element-plus";
    import Drawer from "@/components/Drawer.vue";
    import Page from "@/components/Pagination.vue";
    import searchDiv from "@/components/Search.vue";
    import Upload from "@/components/Upload.vue";
    export default {
        name:'cash_pro_manager',
        components: {Upload},
        setup() {
            let form = ref(null);
            const {ctx} = getCurrentInstance();
            let state = reactive({
                model_type: '',
                totalPage: '', //列表总页数
                current_title: "",
                is_show_type: true, //是否显示绑定门店还是查看已绑定门店
                keyword: "",
                up_url:"/api/tanxiaji/common/upload_file/",
                drawer: false,
                imageUrl:"",
                form: {
                    proname:'',
                    pro_cartons:'',
                    pro_price:''
                },
                rules: {
                    proname: [
                        {required: true, message: "请填写商品名称", trigger: "blur"},
                    ],
                    pro_cartons: [
                        {required: true, message: "请填写商品规格", trigger: "blur"},
                    ],
                    pro_price: [
                        {required: true, message: "请填写商品售价", trigger: "blur"},
                    ]
                }
            });
            onMounted(() => {
                getOrderlist();
            });

            //   打开创建弹窗
            function createDepartment() {
                state.model_type = "创建";
                state.drawer = true;
                state.good_title = "创建";
                state.imageUrl="";
            }
            // 图片上传
            function onSuccess(e){
                console.log(e);
                state.imageUrl=ctx.$http.IMG_HOST+e.url;
            }
            // 禁用
            function deleteRow(item) {
                if (confirm("是否进行此操作?")) {
                    ctx.$http
                        .post("/tanxiaji/user_forbid/", {
                            staff_id: item.id,
                        })
                        .then((res) => {
                            if (res.errno == 0) {
                                ElNotification.success(res.errmsg);
                                getOrderlist();
                            } else {
                                ElNotification.error(res.errmsg);
                            }
                        })
                        .catch((err) => {
                            ElNotification.error(err);
                        });
                }
            }

            //获取列表
            function getOrderlist() {
                ctx.$http
                    .get("/tanxiaji/get_user_list/", {
                        index: state.page,
                        count: 20,
                        department_id: state.form.department_name,
                        job_id: state.form.job_name,
                        keywords: state.keyword
                    })
                    .then((res) => {
                        if (res.errno == 0) {
                            state.tableData = res.user_list;
                            console.log(res.total_page_num)
                            state.totalPage = res.total_page_num;
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            // 打开编辑
            function edit_depart(item) {
                state.good_title = "编辑";
                state.model_type = "编辑";
                state.drawer = true;
                state.common_id = item.id;
                state.form.username = item.username;
                state.form.pro_cartons = item.pro_cartons;
                state.form.pro_price = item.pro_price;
            }
            //    提交新创建的用户
            function create() {
                let url = "";
                let data = "";
                if (state.model_type == "创建") {
                    url = "/tanxiaji/user_add/";
                    data = {
                        staff_id: 0,
                        name: state.form.username,
                        phone: state.form.phone,
                        type: state.form.belong_job_name,
                        department: state.form.belong_part_name
                    }
                } else {
                    url = "/tanxiaji/user_edit/";
                    data = {
                        staff_id: state.common_id,
                        name: state.form.username,
                        phone: state.form.phone,
                        type: state.form.belong_job_name,
                        department: state.form.belong_part_name
                    }
                }
                form.value.validate((valid) => {
                    if (valid) {
                        ctx.$http
                            .post(url, data)
                            .then((res) => {
                                if (res.errno == 0) {
                                    ElNotification.success(res.errmsg);
                                    state.depart_dialogVisible = false;
                                    getOrderlist();
                                } else {
                                    ElNotification.error(res.errmsg);
                                }
                            })
                            .catch((err) => {
                                ElNotification.error(err);
                            });
                    } else {
                    }
                });
            }


            return {
                form,
                state,
                getOrderlist,
                createDepartment,
                create,
                edit_depart,
                deleteRow,
                onSuccess
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        .conTxt {
            width: 70%;
            margin: auto;
        }
        .rowDiv {
            display: flex;
            align-items: center;
            padding: 10px 0;
            justify-content: space-between;
            .row-left {
                display: flex;
                align-items: center;
            }
            .row-right {
                display: flex;
                align-items: center;
            }

        }
        .row-item {
            display: flex;
            white-space: nowrap;
            align-items: center;
        }
        .btnGroup {
            width: 30%;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;
        }
        .el-table /deep/ th {
            background-color: #eaeaea;
            text-align: center;
        }
        .el-table /deep/ td {
            text-align: center;
        }
    }
</style>